<template>
    <div class="gold-shop-wrap">
      <van-nav-bar title="我的代理" left-arrow fixed @click-left="onClickLeft" />
      <!-- <div class="level">
        <div class="level_info" @click="levelShow = true" style="display: flex;align-items: center;">当前级别: {{ name }} <img
            style="width: .25rem;height: .2rem;" src="../../../images/address-arrow-icon.png" alt=""></div>
          <div class="level_tag" :style="{'color':text_color}">{{extra_tag}}</div>
        <img :src="background" />
      </div> -->
      <!-- <div class="level_data" v-for="item, index in levelInfo.data_list"
        v-if="levelInfo.data_list && levelInfo.data_list.length > 0">
        <div class="level_data_img">
          <img src="../../../images/mine/icon_shuju.png" />
          {{ item.title }}
        </div>
        <div class="level_data_text">
          <div class="tips" v-if="item.desc">{{ item.desc }}</div>
          <div v-for="items, index in item.items" :key="index">
            {{ items.left_text }}{{ items.right_text }}
          </div>
        </div>
      </div> -->
      <div class="level_title" v-for="item, index in levelInfo" :key="index">
        <div class="level_title_btn">
          <div class="title">{{ item.title }}</div>
          <div class="btn" @click="getLevel(item.button_key, item.level,item.title)">{{ item.button_text }}</div>
        </div>
        <div class="level_title_text" v-if="item.content" v-html="item.content.replace(/\n/g, '<br>')">
        </div>
      </div>
<!--       
      <van-popup v-model="levelShow" position="bottom">
        <van-picker title="选择级别" value-key="name" show-toolbar :columns="options" @confirm="onConfirmBig"
          @cancel="levelShow = false" :value="cascaderValue" />
      </van-popup> -->
    </div>
  </template>
  <script>
  import { AGENT_APPLY_DATA, SERVICE_BUY, USER_LEVEL_OPTIONS } from '@/api/mine'
  export default {
    data() {
      return {
        levelInfo: {},
        options: [],
        levelShow: false,
        cascaderValue: '',
        background: '',
        name: '',
        level: '',
        extra_tag:'',
        text_color:''
      };
    },
    mounted() {
      window.scrollTo(0, 0)
      localStorage.removeItem('levelInfo')
      this.getLevelInfo()
    },
    methods: {
      getLevelInfo() {
        this.$http.get(AGENT_APPLY_DATA).then(res => {
          this.levelInfo = res.data
        })
      },
      onClickLeft() {
        this.$router.back();
      },
      getLevel(key, level,name) {
        if (key == 'level_buy') {
          // 去购买
          let params = {
            type: 1,
            level: level
          }
          this.$http.post(SERVICE_BUY, params).then(res => {
            this.$router.push({ path: '/levelCashier' })
            res.data.expired_time = new Date().getTime() + res.data.expired_seconds * 1000;
            localStorage.setItem('cashOrder', JSON.stringify(res.data))
          })
          //
        } else if (key == 'agent_apply') {
          this.getApplyAgent(level,name)
        } else if (key == 'agent_info') {
          this.getMyAgent(level)
        } else if (key == 'big_agent_apply') {
          this.getApplyAgent(level,name)
        } else if (key == 'big_agent_info') {
          this.getMyAgent(level)
        }
      },
      // 我的代理
      getMyAgent(level) {
        this.$router.push({ path: '/myAgent', query: { level } })
      },
      // 申请代理
      getApplyAgent(level,name) {
        this.$router.push({ path: '/applyAgent', query: { level,name } })
      }
    },
  };
  </script>
  <style lang="scss" scoped>
  .gold-shop-wrap {
    min-height: 100vh;
    padding-top: 46px;
    padding-bottom: 1.2rem;
    background: #f2f4f5;
    box-sizing: border-box;
  
    ::v-deep .van-nav-bar .van-icon {
      color: #333333;
    }
  
    ::v-deep .van-nav-bar__arrow {
      font-size: 20px;
    }
  }
  
  .level {
    position: relative;
    width: 7.02rem;
    height: 2.9rem;
    margin: 0 auto;
  
    .level_info {
      // width: 1.4rem;
      height: 0.44rem;
      font-size: 0.24rem;
      font-weight: 500;
      // line-height: 0.44rem;
      background: #ffffff;
      border-radius: 0px 100px 100px 0px;
      color: #333;
      padding-left: .2rem;
      padding-right: 0.18rem;
      position: absolute;
      top: 0.7rem;
    }
    .level_tag{
      position: absolute;
      bottom: .3rem;
      right:50%;
      transform: translateX(-50%);;
      font-size: 0.24rem;
      font-weight: 500;
      line-height: 0.44rem;
    }
    img {
      display: block;
      margin: 0 auto;
      width: 100%;
      height: 100%;
  
    }
  }
  
  .level_data {
    width: 95%;
    margin: 0 auto;
    background: #fff;
    padding-bottom: 0.2rem;
    border-radius: 8px;
    margin-top: 0.2rem;
  
    .level_data_img {
      background: #f5f7fe;
      border-radius: 8px 8px 0px 0px;
      // opacity: 0.06;
      padding: 0.2rem;
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 0.28rem;
      // line-height: 0.4rem;
      // text-align: left;
      color: #333333;
      font-style: normal;
  
      img {
        width: 0.32rem;
        vertical-align: middle;
      }
    }
  
    .level_data_text {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 0.24rem;
      color: #666666;
      line-height: 0.44rem;
      // text-align: left;
      font-style: normal;
      padding-left: 0.2rem;
      margin-top: 0.2rem;
  
      .tips {
        margin-bottom: 0.12rem;
        color: #F32A23;
      }
    }
  }
  
  .level_title {
    width: 95%;
    margin: 0 auto;
    background: #fff;
    // padding-bottom: 0.2rem;
    border-radius: 8px;
    margin-top: 0.2rem;
  
    .level_title_btn {
      display: flex;
      justify-content: space-between;
      padding: 0.2rem;
  
      .title {
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 0.32rem;
        color: #333333;
        line-height: 0.44rem;
        text-align: left;
        font-style: normal;
      }
  
      .btn {
        padding: 0.1rem 0.3rem;
        background: linear-gradient(270deg, #1261E2 0%, #4A89EC 100%);
        border-radius: 0.28rem;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 0.24rem;
        color: #ffffff;
        // line-height: 0.34rem;
        //   text-align: left;
        font-style: normal;
      }
    }
  
    .level_title_text {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 0.24rem;
      color: #666666;
      line-height: 0.44rem;
      // text-align: left;
      font-style: normal;
      margin-left: 0.2rem;
      padding-bottom: 0.2rem;
    }
  }
  </style>
  